body {
    min-width: 1200px;
}
.w {
    width: 1200px;
    margin: 0 auto;
}
.clearfix:after,
.clearfix:before {
    content: "";
    display: block;
    clear: both;
}

$red-color: #b1191a;
a,
li,
p {
    color: #666;
    font-size: 12px;
    &:hover {
        color: $red-color;
    }
}
div {
    box-sizing: border-box;
}
h3 {
    font-size: 18px;
}

/* 顶部导航栏 */
.shortcut {
    height: 31px;
    background-color: #f1f1f1;
    li {
        line-height: 31px;
    }
}

.shortcut .fl li {
    float: left;
    margin-right: 5px;
}

.shortcut .fr ul {
    display: flex;
    justify-content: space-around;
    float: right;
    width: 608px;
    li {
        float: left;
        position: relative;
    }
}

.red-color {
    color: $red-color;
}

.spacer {
    width: 1px;
    height: 12px;
    background-color: #666;
    margin: 10px 12px 0;
}

/* header区域 */
header {
    position: relative;
    height: 105px;
}
.logo {
    position: absolute;
    top: 25px;
    vertical-align: bottom;
}
/* 搜索框 */
.search-warp {
    position: absolute;
    top: 25px;
    left: 348px;
    .search {
        width: 445px;
        border: 2px solid $red-color;
        padding-left: 10px;
        box-sizing: border-box;
    }
    .search-btn {
        width: 82px;
        font-size: 16px;
        color: #fff;
        background-color: $red-color;
    }
    .search,
    .search-btn {
        float: left;
        height: 36px;
    }
}
/* 搜索栏下面的导航栏 */
.hotwords {
    display: flex;
    justify-content: flex-start;
    position: absolute;
    top: 65px;
    left: 348px;
    width: 527px;
    height: 18px;
    a {
        margin: 0 10px;
    }
}
.shopcar {
    position: absolute;
    top: 25px;
    right: 64px;
    width: 138px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border: 1px solid #666;
    background-color: #f7f7f7;
    span {
        vertical-align: top;
    }
}

/* 导航栏 */
nav {
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    border-bottom: 2px solid $red-color;
    .dropdown {
        width: 209px;
        text-align: center;
        font-weight: 700;
        color: #fff;
        background-color: $red-color;
    }
    .w {
        position: relative;
        .navlist {
            position: absolute;
            top: 0;
            left: 209px;
            ul {
                display: flex;
                justify-content: space-around;
                width: 736px;
                li {
                    font-size: 16px;
                }
            }
        }
    }
}
/* 主要内容 */
.w {
    position: relative;
    .list-bd {
        width: 209px;
        height: 465px;
        background-color: #c81623;
        ul {
            display: flex;
            flex-direction: column;
            height: 465px;
        }
        .menu_item {
            position: relative;
            padding: 0 10px;
            height: 38.75px;
            line-height: 38.75px;
            &:hover {
                background-color: #fff;
                a {
                    color: $red-color;
                }
            }
            a {
                font-size: 16px;
                font-weight: 400;
                color: #fff;
            }
            img {
                position: absolute;
                right: 0;
                // 令箭头居中
                top: 11.375px;
            }
        }
    }
    .main {
        position: absolute;
        top: 0;
        left: 209px;
        width: 980px;
        height: 455px;
        margin: 10px;
        .focus img {
            width: 720px;
        }
        .newflash {
            position: absolute;
            top: 0;
            right: 0;
            .news_hd {
                width: 250px;
                height: 33px;
                line-height: 33px;
                border: 1px solid #e8e8e7;
                h3 {
                    display: inline-block;
                    width: 100px;
                    height: 19px;
                    text-align: center;
                    font-size: 14px;
                    color: #666;
                }
                a {
                    float: right;
                    font-size: 14px;
                    width: 66px;
                }
            }
            .news_bd {
                padding: 12px 0 10px 15px;
                border: 1px solid #e8e8e7;
                margin-top: -1px;
                ul li {
                    width: 100%;
                    height: 23px;
                }
            }
            .lifeservice {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                width: 250px;
                height: 212px;
                // box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
                div {
                    width: 61px;
                    height: 69px;
                    border: 1px solid #e8e8e7;
                    /* 如何快速去掉重复边框？？？ */
                    p {
                        text-align: center;
                        &::before {
                            content: "";
                            display: block;
                            width: 24px;
                            height: 24px;
                            background-image: url(../images/icons.png);
                            background-position: -20px -15px;
                            margin: 10px 18.5px;
                        }
                    }
                }
            }
            .bargin {
                img {
                    width: 250px;
                    height: 70px;
                }
            }
        }
    }
}

/* 今日推荐 */
.recommend {
    display: flex;
    height: 163px;
    margin-top: 10px;
    .rec-clock {
        width: 206px;
        text-align: center;
        background-color: #666;
        img {
            margin: 30px 0 10px 0;
        }
        h3 {
            color: #fff;
            font-weight: 400;
            line-height: 27px;
        }
    }
    .rec-img {
        display: flex;
        background-color: #ebebeb;
    }
}
/* 猜你喜欢 */
.youlike {
    height: 258px;
    margin-top: 10px;
    .youlike-title {
        height: 28px;
        margin-bottom: 5px;
        h3 {
            float: left;
            display: inline;
            color: #333;
            font-style: normal;
        }
        a {
            float: right;
        }
    }
    .youlike-pic {
        border: 1px solid #ededed;
        height: 230px;
        ul {
            display: flex;
            li {
                float: left;
            }
        }
    }
}

/* 有趣区 */
.funarea {
    // display: flex;
    margin-top: 30px;
    margin-bottom: 10px;
    height: 433px;
    h3 {
        font-style: normal;
        color: #333333;
    }
    .funarea_content {
        display: flex;
        .funbook {
            width: 404px;
            height: 405px;
        }
        .goods {
            width: 226px;
        }
        .pinpaijie {
            width: 405px;
        }
        .pin_dapai {
            float: left;
            width: 202px;
        }
        .pin_tm {
            float: left;
            width: 202px;
        }
        .goods-title,
        .pinpaijie {
            text-align: center;
        }
        .goods-title a,
        .pinpaijie a {
            font-size: 14px;
            font-weight: 800;
            line-height: 26px;
        }
    }
}
// 楼层区
.floor {
    margin-top: 30px;
    .jiadian {
        // margin-top: 30px;
        .box_hd {
            border-bottom: $red-color 2px solid;
            h3 {
                float: left;
            }
            .tab_list {
                float: right;
                li {
                    float: left;
                    a {
                        margin: 0 15px;
                    }
                }
            }
        }
        .box_bd {
            .tab-con {
                li {
                    float: left;
                    height: 361px;
                }
                .w209 {
                    width: 209px;
                    .tab-con-list li {
                        float: left;
                        overflow: hidden;
                        width: 86px;
                        height: 32px;
                        line-height: 32px;
                        border-bottom: 1px solid #ebebeb;
                        margin-left: 10px;
                        text-align: center;
                    }
                    img {
                        overflow: hidden;
                        width: 196px;
                        height: 261px;
                    }
                }
                .w220 {
                    float: left;
                    width: 220px;
                }
            }
        }
    }
}
// footer
.footer {
    height: 386px;
    margin-top: 30px;
    .mod_service {
        border-bottom: 1px solid #444;
        ul {
            display: flex;
            justify-content: space-around;
            li {
                display: flex;
                justify-content: center;
                width: 240px;
            }
            .mod_service_zheng {
                display: block;
                width: 54px;
                height: 54px;
                background-image: url(../images/icons.png);
                background-position: -253px 0;
            }
            .mod_service_tit {
                height: 54px;
                margin-top: 12px;
                color: #000;
            }
        }
    }
    .mod_help {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
        border-bottom: 1px solid #444;
        .mod_help_item {
            margin-bottom: 20px;

            dt {
                line-height: 40px;
            }
            dd {
                line-height: 18px;
            }
        }
    }
    .mod_copyright {
        margin: 20px;
        text-align: center;
        p {
            margin: 10px;
            &:hover {
                color: #666;
            }
            a {
                font-size: 14px;
                margin: 0 20px;
            }
        }
    }
}
